<template>
	<view>
		<!-- 消息类型标签 -->
		<scroll-view scroll-x class="message-tabs">
			<view class="tab-list">
				<view class="message-tab" :class="{ active: activeTab === 'all' }" @click="switchTab('all')">
					<text>全部消息</text>
				</view>
				<view class="message-tab" :class="{ active: activeTab === 'system' }" @click="switchTab('system')">
					<text>系统消息</text>
				</view>
				<view class="message-tab" :class="{ active: activeTab === 'merchant' }" @click="switchTab('merchant')">
					<text>商家消息</text>
				</view>
				<view class="message-tab" :class="{ active: activeTab === 'activity' }" @click="switchTab('activity')">
					<text>活动消息</text>
				</view>
				<view class="message-tab" :class="{ active: activeTab === 'promotion' }"
					@click="switchTab('promotion')">
					<text>促销消息</text>
				</view>
			</view>
		</scroll-view>

		<!-- 消息列表 -->
		<scroll-view scroll-y class="message-list">
			<view class="message-item" v-for="(item, index) in filteredMessages" :key="index" @click="toMsg(item)">
				<view class="merchant-info" v-if="item.merchant">
					<view class="merchant-avatar">
						<uni-icons type="shop" size="20" color="#666"></uni-icons>
					</view>
					<text class="merchant-name">{{ item.merchant }}</text>
				</view>
				<view class="message-header">
					<view class="header-left">
						<view :class="['message-type', `type-${item.type}`]">
							<text>{{ item.typeText }}</text>
							<view class="unread-badge" v-if="item.unread">{{ item.unread }}</view>
						</view>
						<text class="message-title">{{ item.title }}</text>
					</view>
					<text class="message-time">{{ item.time }}</text>
				</view>
				<view class="message-content">{{ item.content }}</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	// 跳转到消息详情页
	const toMsg = (item) => {
		uni.navigateTo({
			url: '/subpackage_msg/msg/customer_service?id=' + item.id
		});
	};

	// 当前选中的标签
	const activeTab = ref('all');

	// 消息数据
	const messages = ref([{
			type: 'service',
			typeText: '客服消息',
			merchant: '优品生活馆',
			title: '订单咨询回复',
			time: '2023-08-16 14:30',
			content: '您好，关于您咨询的订单退款问题，我们已经为您处理完成，退款金额将在1-3个工作日内退回您的支付账户。'
		},
		{
			type: 'system',
			typeText: '系统通知',
			title: '系统维护公告',
			time: '2023-08-15 10:00',
			content: '尊敬的用户，系统将于本周六凌晨2:00-4:00进行例行维护升级，期间可能影响正常使用，请提前安排好您的购物时间。'
		},
		{
			type: 'activity',
			typeText: '活动通知',
			merchant: '时尚优品店',
			title: '新品上市活动',
			time: '2023-08-14 15:30',
			content: '8月新品特惠活动现已开启，多款新品限时8.8折，更有满200减30优惠券等你来领！',
			unread: 1
		},
		{
			type: 'promotion',
			typeText: '促销活动',
			merchant: '品质优选店',
			title: '会员专享优惠',
			time: '2023-08-13 09:15',
			content: '本周会员专享：指定商品买二送一，还有更多会员专属优惠等你发现！',
			unread: 3
		},
		{
			type: 'merchant',
			typeText: '商家消息',
			merchant: '优品专营店',
			title: '店铺活动通知',
			time: '2023-08-12 16:45',
			content: '亲爱的顾客，我们店铺即将举办周年庆活动，届时将有多款商品特价优惠，诚挚邀请您参与！',
			unread: 5
		}
	]);

	// 根据当前标签筛选消息
	const filteredMessages = computed(() => {
		if (activeTab.value === 'all') return messages.value;
		return messages.value.filter(msg => msg.type === activeTab.value);
	});

	// 切换标签
	const switchTab = (tab) => {
		activeTab.value = tab;
	};
</script>

<style lang="scss" scoped>
	.message-tabs {
		background-color: #fff;
		padding: 12px 0;
		white-space: nowrap;
		border-bottom: 1px solid #f0f0f0;

		.tab-list {
			display: flex;
			padding: 0 12px;
		}

		.message-tab {
			padding: 6px 16px;
			margin-right: 12px;
			border-radius: 16px;
			font-size: 14px;
			color: #666;
			background-color: #f5f5f5;
			transition: all 0.3s;

			&.active {
				background-color: var(--primary-color, #ff6a6a);
				color: #fff;
			}
		}
	}

	.message-list {
		padding-bottom: 80px;
		height: 100vh;
	}

	.message-item {
		background-color: #fff;
		border-radius: 12px;
		padding: 16px;
		margin: 12px;
		margin-bottom: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

		.merchant-info {
			display: flex;
			align-items: center;
			margin-bottom: 12px;
			padding-bottom: 12px;
			border-bottom: 1px solid #f0f0f0;

			.merchant-avatar {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				background-color: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 8px;
			}

			.merchant-name {
				font-size: 14px;
				color: #333;
			}
		}

		.message-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 8px;

			.header-left {
				display: flex;
				align-items: center;
			}

			.message-type {
				padding: 2px 8px;
				border-radius: 4px;
				font-size: 12px;
				margin-right: 8px;
				position: relative;

				&.type-system {
					background-color: #e3f2fd;
					color: #1976d2;
				}

				&.type-activity {
					background-color: #f3e5f5;
					color: #9c27b0;
				}

				&.type-promotion {
					background-color: #fff3e0;
					color: #f57c00;
				}

				&.type-service {
					background-color: #e8f5e9;
					color: #388e3c;
				}

				&.type-merchant {
					background-color: #e1f5fe;
					color: #0288d1;
				}

				.unread-badge {
					position: absolute;
					top: -8px;
					right: -8px;
					background-color: #ff4d4f;
					color: #fff;
					font-size: 10px;
					padding: 0 4px;
					height: 16px;
					line-height: 16px;
					border-radius: 8px;
					min-width: 16px;
					text-align: center;
				}
			}

			.message-title {
				font-size: 15px;
				color: #333;
				font-weight: 500;
			}

			.message-time {
				font-size: 12px;
				color: #999;
			}
		}

		.message-content {
			font-size: 14px;
			color: #666;
			line-height: 1.5;
		}
	}
</style>